<template>
  <div>
    <Card class="card-area-fill-plaltf">
      <div class="card-header">
        <span>APP日活</span>
      </div>
      <div class="value">
        <span >{{ count.todayDailyLivingNum }}</span>
      </div>
      <!-- <apexchart
        type="area"
        height="45"
        :options="chartOptions"
        :series="series"
      /> -->
       <div style="margin: 10px 0 7px 0; height: 2px;">
          </div>
      <div class="today">
        <span class="t">近15天新增量</span>
        <span class="v">{{count.dailyLivingNum}}</span>
      </div>
    </Card>
  </div>
</template>

<script>
import { CountUp } from "countup.js";
import { userStatistics } from "@/api/index";
var zh = require("@/libs/zh.json");
export default {
  name: "cardAreaFill",
  components: {},
  props: {
    homeDataTotalDays: {
      type: Array,
    },
    homeDataTotalEntrusted: {
      type: Array,
    },
    count: {
      type: Object,
    },
  },
  data() {
    return {
      count: {},
      series: [
        {
          name: "",
          data: [],
        },
      ],
      chartOptions: {
        colors: ["#975fe4"],
        chart: {
          toolbar: {
            show: false,
          },
          sparkline: {
            enabled: true,
          },
          locales: [zh],
          defaultLocale: "zh",
        },
        fill: {
          opacity: 1,
          type: "solid",
        },
        dataLabels: {
          enabled: false,
        },
        stroke: {
          width: 0,
          curve: "smooth",
        },
        labels: this.homeDataTotalDays,
        yaxis: {
          min: 0,
        },
        xaxis: {
          type: "datetime",
        },
        tooltip: {
          enabled: true,
          x: {
            show: true,
            format: "MMM dd日",
          },
        },
      },
      num: 0,
    };
  },
  methods: {
    init() {
      this.series = [
        {
          name: "运单量",
          data: this.homeDataTotalEntrusted,
        },
      ];
      this.num = 0;
      this.homeDataTotalEntrusted.forEach((item) => {
        this.num += item;
      });
      new CountUp("countup2", this.num).start();
    },
  },
  mounted() {
    this.init();
  },
};
</script>
<style lang="less" scoped>
.card-area-fill-plaltf {
  height: 170px;
  .card-header {
    display: flex;
    height: 22px;
    align-items: center;
    justify-content: space-between;
   font-size: 16px;
    margin: 15px 0;
  }
  .value {
    height: 38px;
    margin-top: 4px;
    margin-bottom: 6px;
    overflow: hidden;
    color: rgba(0, 0, 0, 0.85);
    font-size: 30px;
    line-height: 38px;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
     span {
      color: #ffcc66;
    }
  }
  .today {
    margin-top: 8px;
    padding-top: 9px;
    border-top: 1px solid #e8e8e8;
    .v {
      margin-left: 8px;
       color: #33ff33;
    }
  }
}
</style>